<script>
export default {
  name: "brandManagement",
  data(){
    return {
      carList: [
        {
          id:1,
          carName:'奔驰',
          cTime: new Date()
        },
        {
          id:2,
          carName:'宝马',
          cTime: new Date()
        },
      ],
      carId : '',
      carNAme: '',
      delActive:'',
      modifyActive:'',
      oldVal:'',
      newVal:'',
      searchKey:''
    }
  },
  methods:{
    keySearch() {
      return this.carList.filter((item)=> {
        return item.carName.includes(this.searchKey)
      })

    },
    // 添加
    add() {
      let obj= {
        id :this.carId,
        carName:this.carNAme,
        cTime:new Date()
      }
      if (this.carList.some(item => item.id === this.carId)){
        alert('id重复')
      } else {
        this.carList.push(obj)
      }
    },
    // 删除
    del(item) {
      this.delActive = this.carList.indexOf(item)
   },
    confirmTransition(){
      this.carList.splice(this.delActive,1)
    }
  },
  // 搜索

  // 修改
  modify(item){
    this.modifyActive = this.carList.indexOf(item)
    this.oldVal = this.carList[this.modifyActive].carName
  },
  confirmTheChanges() {
    this.carList[this.modifyActive].carName = this.newVal
  }


}
</script>

<template>
  <div>
    <div class="container">
      <div class="card">
        <div class="card-header">头部</div>
        <div class="card-body">
          <form class="form-inline">
            <label for="email">id:</label>
            <input type="text"  id="email" v-model="carId">
            <label for="pwd">carName:</label>
            <input type="text" id="pwd" v-model="carNAme">
            <button type="button" class="btn btn-primary" @click="add">添加</button>
            <label for="search">搜索:</label>
            <input type="text" id="search" v-model="searchKey" @keyup="keySearch" >
          </form>
        </div>
        <table class="table">
          <thead>
          <tr >
            <th>id</th>
            <th>name</th>
            <th>Ctime</th>
            <th>operation</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="item in carList" :key="item.id">
            <td>{{item.id}}</td>
            <td>{{item.carName}}</td>
            <td>{{item.cTime}}</td>
            <td>
              <button  @click="del(item)" type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
                删除
              </button>
              <button @click="modify(item)" type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal1">
                修改
              </button>
            </td>
          </tr>
          </tbody>
        </table>

      </div>
    </div>
    <!-- 模态框 -->
    <div class="modal fade" id="myModal1">
      <div class="modal-dialog">
        <div class="modal-content">

          <!-- 模态框头部 -->
          <div class="modal-header">
            <h4 class="modal-title">模态框头部</h4>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
          </div>

          <!-- 模态框主体 -->
          <div class="modal-body">
            原来的值：<input type="text" v-model="oldVal">
            修改的值：<input type="text" v-model="newVal">
          </div>

          <!-- 模态框底部 -->
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
          </div>

        </div>
      </div>
    </div>
    <div class="modal fade" id="myModal">
      <div class="modal-dialog">
        <div class="modal-content">

          <!-- 模态框头部 -->
          <div class="modal-header">
            <h4 class="modal-title">模态框头部</h4>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
          </div>

          <!-- 模态框主体 -->
          <div class="modal-body">
            是否删除
          </div>

          <!-- 模态框底部 -->
          <div class="modal-footer">
            <button @click="confirmTransition" type="button" class="btn btn-secondary" data-dismiss="modal">确认</button>
            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
          </div>

        </div>
      </div>
    </div>
  </div>

</template>

<style scoped lang="less">

</style>